import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStaticNavigation} from '@react-navigation/native';
import Login from './Login';
import FeedScreen from './FeedScreen';
import Detail from './Detail';
import Info from './Info';
import MessagesScreen from './MessagesScreen';

export default function App() {
  const FeedStack = createNativeStackNavigator({
    screens: {
      Feed: {
        screen: FeedScreen,
        options: {
          headerTitle: '首页',
        },
      },
      Detail: {
        screen: Detail,
        options: {
          headerTitle: '详情',
        },
      },
    },
  });

  const MessagesStack = createNativeStackNavigator({
    screens: {
      Messages: {
        screen: MessagesScreen,
        options: {
          headerTitle: '消息',
        },
      },
      Info: {
        screen: Info,
        options: {
          headerTitle: '详情消息',
        },
      },
    },
  });

  const HomeTabs = createBottomTabNavigator({
    screens: {
      Feed: {
        screen: FeedStack,
        options: {
          headerShown: false,
          tabBarLabel: '首页',
        },
      },
      Messages: {
        screen: MessagesStack,
        options: {
          headerShown: false,
          tabBarLabel: '消息 ',
        },
      },
    },
  });

  const RootStack = createNativeStackNavigator({
    screens: {
      Profile: {
        screen: Login,
        options: {
          headerShown: false,
        },
      },
      Home: {
        screen: HomeTabs,
        options: {
          headerShown: false,
        },
      },
    },
  });

  const Navigation = createStaticNavigation(RootStack);

  return <Navigation />;
}
